<template>
  <div class="card content-box">
    <el-form ref="demoFormRef" :model="form" :rules="rules" label-position="top" >
      <el-row :gutter="20">
        <el-col :span="12">
          
        </el-col>
        </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item :label="dataObj['name'].label" prop="name">
            <template #label>
              替换label<el-tooltip content="Top center" placement="top">
                <el-icon color="#409EFC" class="el-input__icon"><InfoFilled /></el-icon>
              </el-tooltip>
            </template>
            <el-input class="qf_input" v-model="form.name" placeholder="请输入">
              <template #prepend>Http://</template>
              <template #append>.com</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="dataObj['testname'].label">
            <el-input class="qf_input" v-model="form.testname" disabled placeholder="请输入">
              <template #prepend>Http://</template>
              <template #append>.com</template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item :label="dataObj['name'].label" prop="name">
            <el-input class="qf_input" v-model="form.name" placeholder="请输入">
              <template #prepend>
                <el-select v-model="select" placeholder="Select" style="width: 115px">
                  <el-option label="Restaurant" value="1" />
                  <el-option label="Order No." value="2" />
                  <el-option label="Tel" value="3" />
                </el-select>
              </template>
              <template #append>
                <el-select v-model="select" placeholder="Select" style="width: 115px">
                  <el-option label="Restaurant" value="1" />
                  <el-option label="Order No." value="2" />
                  <el-option label="Tel" value="3" />
                </el-select>
              </template>
            </el-input>
            <div class="form_tooltip">
              <el-popover placement="bottom" :width="350" trigger="hover">
                <template #reference>
                  <div class="tooltip_info">
                    <el-icon color="#409EFC" class="el-input__icon"><InfoFilled /></el-icon>input前后选择使用select，不建议直接使用disabled，若使用需要给select也加上disabled
                    不建议直接使用，可以使用input禁用
                  </div>
                </template>
                <div>
                  input前后选择使用select，不建议直接使用disabled，若使用需要给select也加上disabled
                  不建议直接使用，可以使用input禁用<br/>
                  <span class="tip_important">此方法不建议禁用，可如上使用,直接展示文字</span>
                </div>
              </el-popover>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="dataObj['testname'].label">
            <el-input class="qf_input" v-model="form.testname" disabled placeholder="请输入">
              <template #prepend>
                <el-select v-model="select" disabled placeholder="Select" style="width: 115px">
                  <el-option label="Restaurant" value="1" />
                  <el-option label="Order No." value="2" />
                  <el-option label="Tel" value="3" />
                </el-select>
              </template>
              <template #append>
                <el-select v-model="select" disabled placeholder="Select" style="width: 115px">
                  <el-option label="Restaurant" value="1" />
                  <el-option label="Order No." value="2" />
                  <el-option label="Tel" value="3" />
                </el-select>
              </template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item :label="dataObj['testname'].label">
            <el-input
            class="qf_input"
              v-model="form.testname"
              placeholder="Please input"
              :formatter="value => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
              :parser="value => value.replace(/\$\s?|(,*)/g, '')"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="dataObj['testname'].label">
            <el-input
            class="qf_input"
              v-model="form.name"
              disabled
              placeholder="Please input"
              :formatter="value => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
              :parser="value => value.replace(/\$\s?|(,*)/g, '')"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item :label="dataObj['name'].label" prop="name">
            <el-input class="qf_input" v-model="form.name" placeholder="请输入">
              <template #suffix>
                <el-icon class="el-input__icon"><calendar /></el-icon>
              </template>
              <template #prefix>
                <el-icon class="el-input__icon"><search /></el-icon>
              </template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="dataObj['testname'].label">
            <el-input class="qf_input" v-model="form.testname" disabled placeholder="请输入">
              <template #suffix>
                <el-icon class="el-input__icon"><calendar /></el-icon>
              </template>
              <template #prefix>
                <el-icon class="el-input__icon"><search /></el-icon>
              </template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item :label="dataObj['name'].label" prop="name">
            <el-input  class="qf_input" v-model="form.name" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="dataObj['testname'].label">
            <el-input class="qf_input" v-model="form.testname" disabled placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item :label="dataObj['class'].label" prop="class">
            <el-select class="qf_select" v-model="form.class" placeholder="please select your zone">
              <el-option
                v-for="cItem in dataObj['class'].initData"
                :key="cItem.value"
                :label="cItem.label"
                :value="cItem.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="dataObj['classname'].label">
            <el-select  class="qf_select" v-model="form.classname" disabled placeholder="please select your zone">
              <el-option
                v-for="cItem in dataObj['classname'].initData"
                :key="cItem.value"
                :label="cItem.label"
                :value="cItem.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item :label="dataObj['class'].label" prop="class">
            <el-select  class="qf_select" v-model="form.class" :teleported="false" placeholder="please selectddd your zone">
              <el-option
                v-for="cItem in dataObj['class'].initData"
                :key="cItem.value"
                :label="cItem.label"
                :value="cItem.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="dataObj['classname'].label">
            <el-select  class="qf_select" v-model="form.classname" disabled placeholder="pleasesss select your zone">
              <el-option
                v-for="cItem in dataObj['classname'].initData"
                :key="cItem.value"
                :label="cItem.label"
                :value="cItem.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item :label="dataObj['classTwo'].label" prop="classTwo">
            <el-select  class="qf_select" v-model="form.classTwo" multiple placeholder="please select your zone">
              <el-option
                v-for="cItem in dataObj['classTwo'].initData"
                :key="cItem.value"
                :label="cItem.label"
                :value="cItem.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="dataObj['classTwo'].label">
            <el-select  class="qf_select" v-model="form.classTwo" multiple disabled placeholder="please select your zone">
              <el-option
                v-for="cItem in dataObj['classTwo'].initData"
                :key="cItem.value"
                :label="cItem.label"
                :value="cItem.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item :label="dataObj['enterDate'].label" prop="enterDate">
            <el-date-picker class="qf_date" v-model="form.enterDate" type="date" placeholder="Pick a day" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="dataObj['enterDate'].label">
            <el-date-picker class="qf_date" v-model="form.enterDate" disabled type="date" placeholder="Pick a day" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item :label="dataObj['role'].label" prop="role">
            <el-checkbox-group v-model="form.role" @change="handleCheckedRoleChange">
              <el-checkbox v-for="rItem in dataObj['role'].initData" :key="rItem.value" :label="rItem.value"   :value="rItem.value">
                {{ rItem.label }}
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="dataObj['role'].label">
            <el-checkbox-group v-model="form.role" disabled @change="handleCheckedRoleChange">
              <el-checkbox v-for="rItem in dataObj['role'].initData" :key="rItem.value" :label="rItem.value"  :value="rItem.value">
                {{ rItem.label }}
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item :label="dataObj['new'].label" prop="new">
            <el-radio-group v-model="form.new">
              <el-radio v-for="nItem in dataObj['new'].initData" :key="nItem.value"  :label="nItem.value"   :value="nItem.value">
                {{ nItem.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="dataObj['new'].label">
            <el-radio-group v-model="form.new" disabled>
              <el-radio v-for="nItem in dataObj['new'].initData" :label="nItem.value"  :value="nItem.value">
                {{ nItem.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item :label="dataObj['name'].label" prop="name">
            <el-input type="textarea"   maxlength="30"
            show-word-limit v-model="form.name" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="dataObj['name'].label"  >
            <el-input  class="qf_input" type="textarea"   maxlength="30" disabled
            show-word-limit v-model="form.name" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="请输入" />
          </el-form-item>
        </el-col>

      </el-row>
      <el-form-item>
        <el-button type="primary" @click="submitForm(demoFormRef)"> Create </el-button>
        <el-button @click="resetForm(demoFormRef)">Reset</el-button>
      </el-form-item>
    </el-form>
  </div>

  <div class="statement">
    <ol>
      <li>清除form表单</li>
    </ol>
    <!-- 页面代码 源码 -->
    <dropWrap key="oreo">
      <pre><code class="language-js">{{ htm }} </code></pre>
    </dropWrap>
    <!-- 页面代码 源码 -->
  </div>
</template>
<script lang="ts" setup>
import formData from "./form.json";
import { formInter } from "@/api/interface/form.ts";
import dropWrap from "../../dropWrap.vue";
import { ref, reactive, onMounted, getCurrentInstance, nextTick } from "vue";
import type { ElForm } from "element-plus";

const { proxy } = getCurrentInstance();

type FormInstance = InstanceType<typeof ElForm>;
const demoFormRef = ref<FormInstance>();

const htm = ref<string>(`
  import type { ElForm } from "element-plus";
  type FormInstance = InstanceType<typeof ElForm>;
  const demoFormRef = ref<FormInstance>();

  清除校验
  demoFormRef.value?.resetFields();
  `);
  const textarea = ref('')
const select = ref("");
const dataObj = reactive<formInter.form<formInter.baseInfo>>(formData.data);
const form = reactive({});
const rules = reactive({
  name: [{ required: true, message: proxy.$t("main.requiredMsg"), trigger: "blur" }],
  class: [{ required: true, message: proxy.$t("main.requiredMsg"), trigger: "change" }],
  classTwo: [{ required: true, message: proxy.$t("main.requiredMsg"), trigger: "change" }],
  enterDate: [{ required: true, message: proxy.$t("main.requiredMsg"), trigger: "change" }],
  role: [{ required: true, message: proxy.$t("main.requiredMsg"), trigger: "change" }],
  new: [{ required: true, message: proxy.$t("main.requiredMsg"), trigger: "change" }]
});

const tableItemList = reactive<formInter.form<formInter.baseInfo>>({});

onMounted(() => {
  nextTick(() => {
    Prism.highlightAll();
  });

  const keys = Object.keys(dataObj);
  let newForm={};
  keys.map(k => {
    newForm[k] = dataObj[k].keyVal;
  }); 
  // demoFormRef.value?.clearValidate("class");

 demoFormRef.value?.resetFields();
 Object.assign(form, newForm)
});
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log("submit!");
    } else {
      console.log("error submit!", fields);
    }
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};
const handleCheckedRoleChange = e => {
  console.log(e, "====");
};
</script>
<style scoped lang="scss">
.el-form {
  width: 100%;
}
.table_cell {
  padding: 10px;
}
</style>
